<template>
    <fieldset>
        <legend>Product</legend>
        <h2>{{$store.state.product.name}}</h2>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>商品:{{item.title}}</b>
                &nbsp;
                <b>单价:{{item.price}}</b>
                &nbsp;
                <b>库存:{{item.inventory}}</b>
                &nbsp;
                <button :disabled="item.inventory===0" @click="add(item)">加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
    import { mapMutations,mapActions,mapState, } from "vuex";
    export default{
        mounted(){
            this.FETCH_PRODUCT()
        },
        methods:{
            ...mapMutations("product",['DECREASE_INVENTORY']),
            ...mapMutations("cart",['SET_CART']),
            ...mapActions("product",['FETCH_PRODUCT']),
            ...mapActions("cart",['ADD_TO_CART']),
            add(item){
            //    this.SET_CART(item)
            //    this.DECREASE_INVENTORY(item)
                  this.ADD_TO_CART(item)
            }
        },
        computed:{
            ...mapState("product",['products'])
        }
    }
</script>